<template>
  <div class="h-[48px] flex justify-between items-center" @click="switchResult">
    <div class="w-[50px] text-center text-[14px] text-[#555]">{{ preDrawIssue }}</div>
    <pcddOpening class="!justify-start" v-if="roomState.opened" />
    <div class="flex-1 w-0 flex items-center justify-start" v-else>
      <div class="flex">
        <div class="w-[22px] h-[22px] flex items-center justify-center">
          <pcddBall :num="lotteryCode[0]"></pcddBall>
        </div>
        <span class="w-[20px] flex justify-center items-center text-[14px]">+</span>
        <div class="w-[22px] h-[22px] flex items-center justify-center">
          <pcddBall :num="lotteryCode[1]"></pcddBall>
        </div>
        <span class="w-[20px] flex justify-center items-center text-[14px]">+</span>
        <div class="w-[22px] h-[22px] flex items-center justify-center">
          <pcddBall :num="lotteryCode[2]"></pcddBall>
        </div>
        <span class="w-[20px] flex justify-center items-center text-[14px]">=</span>
        <div class="w-[22px] h-[22px] flex items-center justify-center">
          <pcddBall :num="codeNumSum"></pcddBall>
        </div>
      </div>
      <div class="w-[120px] ml-[46px]">
        <span
          class="mr-[4px] text-red"
          :class="{
            'text-blue': extendedRes.ds == '小'
          }"
          >{{ extendedRes.dx }}</span
        >
        <span
          class="mr-[4px] text-red"
          :class="{
            'text-blue': extendedRes.ds == '单'
          }"
          >{{ extendedRes.ds }}</span
        >
        <span
          class="mr-[4px] text-red"
          :class="{
            'text-blue': extendedRes.dxds == '小单' || extendedRes.dxds == '大单'
          }"
          >{{ extendedRes.dxds }}</span
        >
        <span class="text-green">{{ extendedRes.bds }}</span>
      </div>
    </div>
    <div class="w-[30px] flex justify-end mr-[14px]">
      <img class="w-[15px] h-[9px]" src="@/assets/images/down.png" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { pcddSumLH } from "@/utils/game";
import { useResult } from "../hooks/use-result";

const roomState = inject<RoomState>("roomState") as RoomState;
const { pcddBall, pcddOpening, preDrawIssue, lotteryCode, codeNumSum, switchResult } = useResult();
const extendedRes = computed(() => pcddSumLH(lotteryCode.value));
</script>
